<link rel="stylesheet" href="{{URL::asset('./css/store/storeHeader.css')}}">

<div class="main" id="storeHeader" v-cloak style="background:white;">
<div class="storeSwiper">
        <div id="news_swiper" class="carousel slide" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#news_swiper" v-for="(item,index) in storeDetails.banner" :data-slide-to="index" :class="{active:index==0}"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item" :class="{active:index==0}" v-for="(item,index) in storeDetails.banner">
                    <!-- <a :href="item.link"> -->
                        <img :src="item" alt="..." style='width:100%;height:350px;'>
                    <!-- </a> -->
                </div>
            </div>
        </div>
    </div>
    <div class="storeEssential">
        <div class="storeImg">
            <img :src="storeDetails.logo" alt="">
        </div>
        <div class="storeMes">
            <div class="storeTitle">
                <span class="storeName">@{{storeDetails.store_name}}</span>
                <img v-if="storeDetails.quality==2" src="{{URL::asset('./img/index/floor_jing.png')}}" alt="">
                <img v-if="storeDetails.hot==2" src="{{URL::asset('./img/index/floor_hot.png')}}" alt="">
            </div>
            <div class="storeTime">
                <p class="text">服务时间：@{{storeDetails.workingtime}}</p>
                <p class="text">地址：@{{storeDetails.area_info}}</p>
            </div>
            <div class="storeGootAt">
                擅长领域：
                <div v-for="(item,index) in storeDetails.cate_id" v-if="index<6">@{{item.name}}</div>
            </div>
            <!-- <div class="storeAddr" v-if="storeDetails.area_info">
                <img src="{{URL::asset('./img/store/storeAddr.png')}}">
                @{{storeDetails.area_info}}
            </div> -->
            <div class="storeMore">
                <span>浏览：@{{storeDetails.view}}</span>
                <span>来电咨询：@{{storeDetails.call}}</span>
                <span>好评：@{{parseInt(storeDetails.credit) || 0}}%</span>
            </div>
        </div>
        <div class="storeButton" v-if="storeType == 1">
            <div class="storeCollect" :class="{active:storeDetails.is_collect==2}">
                <span v-if="storeDetails.is_collect==1" @click="setCollect">
                    <img src="{{URL::asset('./img/store/storeCollectFalse.png')}}" alt="">收藏供应商
                </span>
                <span v-if="storeDetails.is_collect==2" @click="setCollect">
                    已收藏
                </span>
            </div>
            <div @mouseleave="aa">
                <el-popover placement="left" width="490" trigger="manual" v-model="storeDetails.bool" >
                    <div class="dialogTel" style="width: 490px;
    height: 220px;
    background: rgba(255,255,255,1);
    box-shadow: 0px 1px 10px 0px rgba(153,153,153,1);
    border-radius: 2px;padding: 14px 20px;">
                        <div style="
    display: flex;
    align-items: center;justify-content: space-between;">
                        <!-- <div class="dialogTel_title">查看联系方式</div> -->
                        {{--<div class="dialogTel_phone">--}}
                            {{--<img src="{{URL::asset('./img/store/dialogTel.png')}}" alt="">--}}
                            {{--<div>--}}
                                {{--<span class="store_phone">@{{storeDetails.link.master_phone}}</span>--}}
                                {{--<span class="store_ratio"><a style="margin-right:20px;">@{{storeDetails.link.master_name}}</a><a>--}}
                                        {{--电话接通率：<span>--}}
                                            {{--100%--}}
                                        {{--</span>--}}
                                    {{--</a></span>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="dialogTel_QR" v-if="storeType == 1">--}}
                            {{--<img src="{{URL::asset('./img/store/dialogTelQR.png')}}" alt="">--}}
                            {{--<img :src="'http://api.online-service.vip/qr/create/phone?w=200&h=200&n='+storeDetails.link.master_phone+'&style=0'" alt="">--}}
                            {{--<span>扫码快速拨打电话</span>--}}
                        {{--</div>--}}





                        <div class="listButtonDialog_img" style="align-content: center;
    display: grid;height: 100%;
    border-right: 1px dashed #ddd;
    text-align: center;
    width: 287px;">
                            <p style="font-size: 18px;
    font-weight: 600;
    color: rgba(230,31,23,1);
    margin-top: 20px;" class="title">供应商联系电话</p>
                            <p style="font-size: 24px;
    font-weight: 600;
    color: rgba(230,31,23,1);
    margin-top: 5px;" class="phone">@{{storeDetails.link.master_phone}}</p>
                            <p style="font-size: 14px;
    font-family: Source Han Sans CN;
    margin-top: 5px;
    color: rgba(230,31,23,1);
    font-weight: 600;    margin-bottom: 6px;" class="listButtonDialog_name">联系人 @{{storeDetails.link.master_name}}</p>
                            <p class="text" style="width: 168px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(153,153,153,1);
    line-height: 18px;
    margin: 0 auto;
    margin-top: 5px;">请使用注册时的手机联系供应商否则将无法接通</p>
                        </div>
                        <div class="listButtonDialog_QRcode" v-if="storeType == 1" style="margin-left: 35px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;">
                            <img style="width: 120px;
    height: 120px;
    margin-bottom: 10px;" :src="'http://api.online-service.vip/qr/create/phone?w=200&h=200&n='+storeDetails.link.master_phone+'&style=0'" alt="">
                            <span style="font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999;">扫码快速拨打电话</span>
                            {{--<a>x</a>--}}
                        </div>
                    </div>
                    </div>
                    <a v-if="storeType == 1" slot="reference" @click="getQRcode(storeDetails)">
                        <img src="{{URL::asset('./img/store/storeListbottonTel2.png')}}" alt="">联系供应商
                    </a>
                </el-popover>
            </div>
        </div>
        <div class="storeNav">
        <div class="storeNav_title" v-if="storeType == 1">
            <span :class="{active:showNab=='store'}"><a :href="'{{route('home.store.store')}}?id='+storeId">公司首页</a></span>
            <span :class="{active:showNab=='storesummary'}"><a :href="'{{route('home.store.storeSummary')}}?id='+storeId">公司简介</a></span>
            <span :class="{active:showNab=='storeimg'}"><a :href="'{{route('home.store.storeImg')}}?id='+storeId">图片展示</a></span>
            <span :class="{active:showNab=='storeservice'||showNab=='servicedetails'}"><a :href="'{{route('home.store.storeService')}}?id='+storeId">服务内容</a></span>
            {{--<span><a href="{{route('home.goods.goodsList')}}">商品</a></span>--}}
            <span :class="{active:showNab=='storecases' || showNab=='casesdetails'}"><a :href="'{{route('home.store.storeCases')}}?id='+storeId">案例展示</a></span>
            <span :class="{active:showNab=='storepartners'}"><a :href="'{{route('home.store.storePartners')}}?id='+storeId">合作伙伴</a></span>
            <span :class="{active:showNab=='storeevaluates' ||showNab=='evaluateslist' }"><a :href="'{{route('home.store.storeEvaluates')}}?id='+storeId">交易评价</a></span>
        </div>
    </div>
    </div>
    
    
    <div class="storeTel_right" @mouseleave="aa" v-if="storeType == 1">
        <el-popover placement="left" width="440" trigger="manual" v-model="twoBool">
            <div class="dialogTel">
                <!-- <div class="dialogTel_title">查看联系方式</div> -->
                <div class="dialogTel_phone">
                    <img src="{{URL::asset('./img/store/dialogTel.png')}}" alt="">
                    <div>
                        <span class="store_phone">@{{storeDetails.link.master_phone}}</span>
                        <span class="store_ratio"><a style="margin-right:20px;">@{{storeDetails.link.master_name}}</a><a>
                                电话接通率：<span>
                                    100%
                                </span>
                            </a></span>
                    </div>
                </div>
                <div class="dialogTel_QR">
                    <img src="{{URL::asset('./img/store/dialogTelQR.png')}}" alt="">
                    <img :src="'http://api.online-service.vip/qr/create/phone?w=200&h=200&n='+storeDetails.link.master_phone+'&style=0'" alt="">
                    <span>扫码快速拨打电话</span>
                </div>
            </div>
            <a slot="reference" @click="getQRcode(storeDetails,2)">
                <img class="storeTel_rightImg" src="{{URL::asset('./img/store/storeTel_right.png')}}">
            </a>
        </el-popover>
    </div>
</div>
@section('compontentScipts')
<script>
    $(() => {
        let storeHeader = new Vue({
            el: '#storeHeader',
            data: () => {
                return {
                    swiperData: [],
                    twoBool: false,
                    storeDetails: {
                        link: {
                            master_name: "",
                            master_phone: "",
                        }
                    },
                    showNab: '',
                    storeId: '',
                    storeType:1
                }
            },
            created() {
                console.log(this.getString("id"))
                if(this.getString('type')){
                    this.storeType = this.getString('type')
                }else {
                    this.storeType = 1
                }
                let pathnameArr = window.location.pathname.split('/');
                this.showNab = pathnameArr[(pathnameArr.length - 1)];
                if (!this.getString('id')) {
                    window.location.href = "{{ route('home.store.storeList') }}";
                }else {
                    this.storeId = this.getString('id')
                }   
                let data = {
                    adsense_id: 9,
                };
                apiAjax("{{ route('home.public.advs')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.swiperData = res.data;
                        $('.carousel').carousel('cycle');
                    } else {}
                }, (erro) => {});
                this.getDetails()

            },
            mounted() {
                setTimeout(() => {
                    $(".dialogTel").css("display", 'block')
                });
                $(document).ready(() => {
                    $(document).scroll(() => {
                        let topHeight = $(document).scrollTop();
                        let clientWidth = document.body.clientWidth;
                        let astrictHeight = 650;
                        if (topHeight > astrictHeight) {
                            $(".storeTel_right").slideDown("fast", () => {
                                $(".storeTel_right").css("display", "flex")
                                $(".storeTel_right").css("overflow", "inherit");
                            })
                        } else {
                            $(".storeTel_right").hide("fast")
                        }


                    });
                });
            },
            methods: {
                getString(name) {
                    if (!name) return null;
                    // 查询参数：先通过search取值，如果取不到就通过hash来取
                    var after = window.location.search;
                    after = after.substr(1) || window.location.hash.split('?')[1];
                    // 地址栏URL没有查询参数，返回空
                    if (!after) return null;
                    // 如果查询参数中没有"name"，返回空
                    if (after.indexOf(name) === -1) return null;
                    
                    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
                    // 当地址栏参数存在中文时，需要解码，不然会乱码
                    var r = decodeURI(after).match(reg);
                    // 如果url中"name"没有值，返回空
                    if (!r) return null;
                    
                    return r[2];
                },
                setCollect() {
                    let storeDetailData = {
                        collect_id: this.storeId
                    }
                    apiAjax("{{ route('home.store.storeCollectApi')}}", 'post', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.getDetails()
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                aa(){
                    this.storeDetails.bool=false;
                    this.twoBool=false;
                },
                getDetails() {
                    let storeDetailData = {
                        id: this.storeId
                    }
                    apiAjax("{{ route('home.store.storeDetailsApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeDetails = res.data;
                        } else {}
                    }, (erro) => {});
                },
                //点击获取电话转二维码
                getQRcode(item, index) {
                    item.bool = false;
                    this.twoBool = false;
                    if (sessionStorage.getItem("HRuserDetails") && JSON.parse(sessionStorage.getItem("HRuserDetails")).id) {
                        let HRuserDetails = JSON.parse(sessionStorage.getItem("HRuserDetails"))
                        if (HRuserDetails.type == 1) {
                            let data = {
                                phoneA: HRuserDetails.mobile,
                                store_id: item.id,
                            }
                            apiAjax("{{ route('home.phone.map')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    item.link = res.data;
                                    if (index == 2) {
                                        this.twoBool = true;
                                    } else {
                                        item.bool = true;
                                    }
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });

                                }
                            }, (erro) => {

                            });
                        } else {
                            this.$message({
                                message: "您不是HR用户哦！！",
                                type: 'warning'
                            });
                        }

                    } else {
                        this.$message({
                            message: "请先登录",
                            type: 'warning'
                        });
                    }

                }
            }
        })
    })
</script>
@endsection